import React, { Component } from 'react';
import {Form,Input,Select,Button,Radio}from 'element-react';
import {connect}from 'react-redux';
export class Single extends Component{
	constructor(props) {
		super(props);
	this.state = {
		form:this.props.single.form,
		rules:{
			username:[{required:true,message:'请输入姓名',trigger:'blur'},
			{validator:(rule,value,callback)=>{
				if(value===''){
					callback(new Error('请输入姓名'));
				}else{
					if(value.length>20){
					callback(new Error('输入过长，请重新输入'));
					}else if(value.length<=20){
						callback();
					}
				}
		}}],
mobilenumber:[{required:true,message:'请填写电话号码',trigger:'blur'},
			{validator:(rule,value,callback)=>{
			if(value===''){
				callback(new Error('请输入电话号码'))
			}else{
				if(value.length>11){
					callback(new Error('输入位数过长,请重新输入'));
				}else if(value.length===11){
					callback();
				}else{
					callback(new Error('输入位数不够,请继续输入'));
				}
				
				}}}]
		}
	}
}

onChange(key, value){
	//console.log(`key=${key},value=${value}`);
  this.setState({
    form: Object.assign({}, this.state.form, { [key]: value })
  });
}
handleSubmit(){
	console.log(this.state.form);
}
handleReset(e){
	this.refs.form.resetFields();
	let temp={
		username:'',
		mobilenumber:'',
		gender:'0',
		department:'',
		title:'',
		telephone:'',
		email:'',
		cardnumber:'',
		bankname:'',
	}
	this.setState({form:temp});
}
    render(){
        return(
            <Form ref='form' model={this.state.form} rules={this.state.rules} labelWidth='80' className='demo-ruleForm'>
                <Form.Item label='姓名' prop='username'>
                    <Input value={this.state.form.username} onChange={this.onChange.bind(this,'username')} />
                </Form.Item>
				<Form.Item label='性别'>
					<Radio.Group value={this.state.form.gender} onChange={this.onChange.bind(this,'gender')}>
						<Radio value="0">男</Radio>
						<Radio value="1">女</Radio>
				    </Radio.Group>
                </Form.Item>
				<Form.Item label='部门'>
                     <Input value={this.state.form.department} onChange={this.onChange.bind(this, 'department')}></Input>
                </Form.Item>
                <Form.Item label='职务'>
                     <Input  value={this.state.title} onChange={this.onChange.bind(this, 'title')}></Input>
                </Form.Item>
                <Form.Item label='手机号' prop='mobilenumber'>
                    <Input value={this.state.form.mobilenumber} onChange={this.onChange.bind(this,'mobilenumber')} />
                </Form.Item>
                
                
				<Form.Item label='电话'>
					<Input value={this.state.form.telephone} onChange={this.onChange.bind(this,'telephone')}></Input>
				</Form.Item>
				<Form.Item label='电子邮箱'>
                     <Input  value={this.state.form.email} onChange={this.onChange.bind(this, 'email')}></Input>
                </Form.Item>
                <Form.Item label='工资卡号'>
                     <Input  value={this.state.form.cardnumber} onChange={this.onChange.bind(this, 'cardnumber')}></Input>
                </Form.Item>
				<Form.Item label='归属银行'>
					<Input value={this.state.form.bankname} onChange={this.onChange.bind(this,'bankname')}></Input>
				</Form.Item>
				<Form.Item>
					<div className='form-item'>
						<Button type='primary' onClick={this.handleSubmit.bind(this)} nativetype='primary' >提交</Button>
					 	<Button onClick={this.handleReset.bind(this)}>重置</Button>
					</div>
				</Form.Item>
            </Form>
        )
    }
}
const mapStateToProps=(state)=>{
	return {
		single:state.addresssingle
	}
};
export default connect(mapStateToProps)(Single);